<!DOCTYPE html>
<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8">
    <title>{* locale['dashboard.menu.user_manage.title'] *}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="{*cdn*}css/font.css">
    <link rel="stylesheet" href="{*cdn*}css/xadmin.css">
    <link rel="stylesheet" href="{*cdn*}lib/layui/css/layui.css" media="all">
    <script src="{*cdn*}lib/layui/layui.js"></script>
    <script src="{*cdn*}js/xadmin.js"></script>
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="index">
    <div class="layui-fluid">
      <table class="layui-table" lay-data="{id:'table', headers: {token:'{*token*}'}, url:'{*api_url*}?token={*token*}&action=list', height:'full', toolbar: '#headertoolbar', page: true}" lay-filter="table">
        <thead>
          <tr>
            <th lay-data="{align:'center', type:'numbers'}">#</th>
            <th lay-data="{field:'name', align:'center'}">{* locale['dashboard.menu.user_manage.table.name'] *}</th>
            <th lay-data="{field:'username', align:'center'}">{* locale['dashboard.menu.user_manage.table.username'] *}</th>
            <th lay-data="{field:'role_name', align:'center'}">{* locale['dashboard.menu.user_manage.table.permission_name'] *}</th>
            <th lay-data="{field:'email', align:'center', templet: '#tp_email'}">{* locale['dashboard.menu.user_manage.table.email'] *}</th>
            <th lay-data="{field:'phone', align:'center', templet: '#tp_phone'}">{* locale['dashboard.menu.user_manage.table.phone'] *}</th>
            <th lay-data="{field:'create_at', align:'center'}">{* locale['dashboard.menu.user_manage.table.create_time'] *}</th>
            <th lay-data="{field:'update_at', align:'center'}">{* locale['dashboard.menu.user_manage.table.update_time'] *}</th>
            <th lay-data="{fixed:'right', align:'center', toolbar: '#optionsToolBar'}">{* locale['dashboard.menu.user_manage.table.options'] *}</th>
          </tr>
        </thead>
      </table>
      <script type="text/html" id="optionsToolBar">
        <div class="layui-btn-container">
          <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">{* locale['dashboard.menu.user_manage.table.options.edit'] *}</a>
          <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">{* locale['dashboard.menu.user_manage.table.options.delete'] *}</a>
        </div>
      </script>
      <script type="text/html" id="headertoolbar">
        <!-- 刷新按钮  -->
        <button class="layui-btn layui-btn-xs" onclick='window.location.reload()'><i class="iconfont">&#59050;</i> {* locale['dashboard.menu.user_manage.table.reflush'] *}</button>
        <!-- 刷新按钮  -->
        <button class="layui-btn layui-btn-xs" onclick='clear_login()'><i class="iconfont">&#59050;</i> {* locale['dashboard.menu.user_manage.table.clear_login'] *}</button>
        <!-- 新增用户按钮  -->
        <button class="layui-btn layui-btn-xs" onclick="xadmin.open('{* locale['dashboard.menu.user_manage.table.adduser'] *}', '{*user_add_url*}', 550, 430)"><i class="iconfont">&#59065;</i> {* locale['dashboard.menu.user_manage.table.adduser'] *}</button>
        <!-- 根据用户名或账户搜索 -->
        <hr class="layui-bg"></hr>
        <div class="layui-input-inline">
          <select class="layui-input-block" id="searchCondition" lay-verify="required">
            <option value="">--{* locale['dashboard.menu.user_manage.table.search.condition'] *}--</option>
            <option value="id">{* locale['dashboard.menu.user_manage.table.search.condition.userid'] *}</option>
            <option value="email">{* locale['dashboard.menu.user_manage.table.search.condition.email'] *}</option>
            <option value="phone">{* locale['dashboard.menu.user_manage.table.search.condition.phone'] *}</option>
            <option value="name">{* locale['dashboard.menu.user_manage.table.search.condition.username'] *}</option>
            <option value="username">{* locale['dashboard.menu.user_manage.table.search.condition.useraccount'] *}</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <input class="layui-input" id="searchText" type="text" lay-verify="searchText" autocomplete="off"></input>
        </div>
        <button class="layui-btn layui-btn-xs" onclick="searchButton()"><i class="layui-icon layui-icon-search"></i>{* locale['dashboard.menu.user_manage.table.search'] *}</button>
      </script>
    </div>
    {-raw-}
    <!-- 模板用于修饰并调用本地mail与tel程序 -->
    <script type="text/html" id="tp_email"> <a href="mailto:{{d.email}}" class="layui-table-link">{{d.email}}</a> </script>
    <script type="text/html" id="tp_phone"> <a href="tel:{{d.phone}}" class="layui-table-link">{{d.phone}}</a> </script>
    {-raw-}
    <script type="text/javascript">
      var SearchName = "";
      var SearchCondition = "";
      layui.use(['jquery', 'table'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        //监听工具条
        table.on('tool(table)', function(obj){
          var data = obj.data;
          if(obj.event === 'delete'){
            layer.confirm("{*locale['dashboard.menu.user_manage.table.options.delete.confirm']*}", {title:""},
            function(index){
              $.ajax({
                url: "{*api_url*}", type: "POST", headers: {token:"{*token*}"}, data: { action: "delete", id: data.id, token: "{*token*}"},
                error: function (res) {
                  return layer.msg('请求失败', {time:2000});
                },
                success: function (res) {
                  if (res.code != 0) {
                    return layer.msg(res.msg, {time:2000});
                  }
                  return layer.msg(res.msg, {time:1000}, function () {
                    return window.location.reload();
                  });
                },
              })
              return false;
            });
          } else if(obj.event === 'edit'){
            return xadmin.open("{*locale['dashboard.menu.user_manage.table.edituser']*}", "{*user_edit_url*}?id=" + data.id, 550, 430);
          };
        });
      });
      function searchButton () {
        // 不允许搜索空条件
        if ($("#searchText").val() == "" || $("#searchCondition").val() == "" || SearchName == $("#searchText").val() ) {
          return false;
        }
        SearchName = $("#searchText").val();
        SearchCondition = $("#searchCondition").val();
        table.reload('table', {
          url: "{*api_url*}", headers: {token:"{*token*}"},
          where: {
            action: "findUser",
            token: "{*token*}",
            value: SearchName,
            condition: SearchCondition,
          }
        });
      }
      function clear_login() {
        return $.ajax({
          type: "GET",
          url: "{*api_url*}",
          headers: {token:"{*token*}"},
          data:{action:"clear_login", token: "{*token*}"},
          success: function (res) {
            return layer.msg(res.msg, {time:1000}, function (index) {
              if (res.code == 0) {
                location.reload();
              }
            });
          },
          error: function (res) {
            return layer.msg('请求失败', {time:2000});
          }
        })
      }
      </script>
  </body>
</html>
